---
title: Usage
---

import { Tabs, Tab, Callout } from 'nextra-theme-docs';
import { CodeOutput } from '../../components/CodeOutput';

# Usage

## Example

```jsx
import { tw } from 'typewind';

export default function App() {
  return (
    <div
      className={tw.flex.items_center.justify_center.h_["5em"].bg_white.text_black.dark(
        tw.bg_black.text_white
      )}
    >
      <h1 className={tw.text_xl.sm(tw.text_3xl).md(tw.text_4xl).font_bold}>
        Hello World
      </h1>
    </div>
  );
}
```

<Tabs items={['Code Output', 'Result']}>
  <Tab>
    ```jsx
    <div
      className="flex items-center justify-center h-[5em] bg-white text-black dark:bg-black dark:text-white"
    >
      <h1 className="text-xl sm:text-3xl md:text-4xl font-bold">
        Hello World
      </h1>
    </div>
    ```
  </Tab>
  <Tab>
    <CodeOutput>
      <div
        className="flex items-center justify-center h-[5em] bg-white text-black dark:bg-black dark:text-white"
      >
        <h1 className="text-xl sm:text-3xl md:text-4xl font-bold">
          Hello World
        </h1>
      </div>
    </CodeOutput>
  </Tab>
</Tabs>

